<template>
  <div class="app-container product-list">
    <div class="mdtop2">
      <temple-check   @getTemple="initTable"></temple-check>
    </div> 
    <div class="chartbox">
      <pie-chart :tableTitle="tableTitle" :axisData="axisData"></pie-chart> 
    </div> 
		<div style="hight:20px;"></div>
    <count-table :tableTitle="tableTitle" :axisData="axisData"></count-table>
    
  </div> 
</template>
<script>
import templeCheck from "@/components/TempleCheck";
import countTable from "@/components/CountTable";
import pieChart from "@/components/PieChart";
import {  getDonationStatisticsByDate } from "../../api/donation";

export default {
  name: "Donation",
  components: { templeCheck, countTable,pieChart },
  data() {
    return {
      tableTitle: "寺院布施统计(单位：元)",
      axisData: []
    };
  },
  methods: {
    initTable(templeId) {
      // console.log("initTable-templeId:", templeId);
      getDonationStatisticsByDate(templeId).then(resp => {
        //  console.log('resp:',resp);
        if ( resp != null && resp.code == 0 &&  resp.data != null ) {
          resp.data.donationDateList.forEach(function(val ,index) {
            val['name'] =  val.dateFormat;
          });
          this.axisData = resp.data.donationDateList;
        }
      });
    }
  },
  mounted() {
    this.initTable(0);
  }
};
</script>
